<template>
  <div id='region-pie' class='w-full h-full'></div>
</template>

<script setup>
import { Chart } from '@antv/g2'
import { ref } from 'vue'
import { getMockDataFun } from '@/api/home/index.js'

// 主题颜色
let primaryColor = document.documentElement.style.getPropertyValue('--el-color-primary')
let data = ref([])
let pieData = ref([])
onMounted(async () => {
  pieData.value = []
  data.value = await getMockDataFun()
  data.value.forEach(item => {
    let find = pieData.value.find(i => i.id === item.region)
    if (find) {
      find.value += item.actual
    } else {
      pieData.value.push({
        id: item.region,
        value: item.actual,
      })
    }
  })
  setChart()
})

const setChart = () => {
  const chart = new Chart({
    title: '区域销售分布图', // 标题
    container: 'region-pie',
    autoFit: true, // 视图宽高自动撑满父容器
  })

  chart.coordinate({ type: 'theta', innerRadius: 0.25, outerRadius: 0.8 })

  chart
    .interval()
    .data(pieData.value)
    .transform({ type: 'stackY' })
    .encode('y', 'value')
    .encode('color', 'id')

    .label({
      text: 'id',
      fontWeight: 'bold',
      offset: 14,
    })
    .label({
      text: (d)=>d.id + ":" + d.value,
      position: 'spider',
      connectorDistance: 0,
      fontWeight: 'bold',
      textBaseline: 'bottom',
      dy: -4,
    })
    .style('radius', 6)
    .style('stroke', '#fff')
    .style('lineWidth', 3)
    .animate('enter', { type: 'waveIn' })
    .legend(false)
    .tooltip([
      { name: '区域总销售额', field: 'value' },
    ])
  chart.render()
}

</script>

<style scoped>

</style>
